<template>
  <div class="dashboard-container">
    <!-- 顶部标题区域 -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="title-section">
          <h1 class="main-title">沈誉通信用生活综合系统数据大屏</h1>
        </div>
        <div class="header-actions">
          <el-button type="primary" size="small" icon="el-icon-refresh" @click="updateNow()">立即更新</el-button>
        </div>
      </div>
    </div>

    <!-- 核心指标区域 -->
    <div class="kpi-section">
      <el-row :gutter="20">
        <el-col :span="6">
          <MetricCard title="总开通量" :value="overallGroupData.totalOpen" unit="项" />
        </el-col>
        <el-col :span="6">
          <MetricCard title="总使用量" :value="overallGroupData.totalUsage" unit="项" />
        </el-col>
        <el-col :span="6">
          <MetricCard title="周开通量" :value="overallGroupData.weeklyOpen" unit="项" />
        </el-col>
        <el-col :span="6">
          <MetricCard title="周使用量" :value="overallGroupData.weeklyUsage" unit="项" />
        </el-col>
      </el-row>
    </div>

    <!-- 地图与用户画像区域 -->
    <div class="main-content">
      <el-row :gutter="20">

        <!-- 左侧：地理分布（新增单选切换） -->
        <el-col :span="10">
          <div class="map-section">
            <div class="map-selector">
              <h3 class="section-title">地区信用与收入分布</h3>
              <div class="radio-group">
                <input type="radio" id="creditRadio" value="credit" v-model="showMapDataType" class="map-radio">
                <label for="creditRadio" :class="{ active: showMapDataType === 'credit' }">
                  <i class="el-icon-s-data"></i> 信用分
                </label>

                <input type="radio" id="incomeRadio" value="income" v-model="showMapDataType" class="map-radio">
                <label for="incomeRadio" :class="{ active: showMapDataType === 'income' }">
                  <i class="el-icon-money"></i> 收入
                </label>
              </div>
            </div>

            <el-row :gutter="20">
              <el-col :span="24">
                <!-- 动态绑定地图类型 -->
                <shenyang-map :map-data="regionData" :type="showMapDataType" :key="showMapDataType" />
              </el-col>
            </el-row>
          </div>
        </el-col>


        <!-- 风险预警 -->
        <el-col :span="14">
          <div class="risk-section">
            <div class="risk-header">
              <h3 class="section-title">风险用户预警</h3>
            </div>
            <!-- 传递分页后的数据 -->
            <risk-user-table :risk-user-table-data="paginatedRiskData" />
            <!-- 分页控件 -->
            <el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="currentPage" :page-size="pageSize" layout="prev, pager, next, jumper"
              :total="riskUserTableData.length" background />
          </div>
        </el-col>

      </el-row>
    </div>

    <!-- 服务数据与风险预警 -->
    <div class="secondary-content">
      <el-row :gutter="20">
        <!-- 服务数据统计 -->
        <el-col :span="10">
          <div class="service-section">
            <h3 class="section-title">各服务数据统计</h3>
            <triple-bar-chart :categories="serviceCategories" :open-data="openData" :use-data="useData"
              :credit-data="creditData" />
          </div>
        </el-col>

        <!-- 右侧：用户画像 -->
        <el-col :span="14">
          <div class="user-profile-section">
            <h3 class="section-title">用户画像分析</h3>
            <el-row :gutter="20">
              <el-col :span="12">
                <pie-chart :data="creditScoreData" title="信用分分布" />
              </el-col>
              <el-col :span="12">
                <pie-chart :data="ageData" title="年龄分布" />
              </el-col>
              <el-col :span="12">
                <pie-chart :data="genderData" title="性别分布" />
              </el-col>
              <el-col :span="12">
                <pie-chart :data="jobTypeData" title="工作类型分布" />
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 底部信息 -->
    <div class="dashboard-footer">
      <div class="footer-info">
        <span>© 2025 leisure不leisure</span>
      </div>
    </div>
  </div>
</template>


<script>
import OverallGroup from './dashboard/OverallGroup.vue';
import PieChart from './dashboard/PieChart.vue';
import TripleBarChart from './dashboard/TripleBarChart.vue';
import RiskUserTable from './dashboard/RiskUserTable.vue';
import ShenyangMap from './dashboard/ShenyangMap.vue';
import MetricCard from './dashboard/MetricCard.vue';

import axios from 'axios';
import { Message } from 'element-ui';

export default {
  components: {
    OverallGroup,
    PieChart,
    TripleBarChart,
    RiskUserTable,
    ShenyangMap,
    MetricCard,
  },
  computed: {
    serviceCategories() {
      return [
        '便捷租房', '信用购物', '酒店预订',
        '舒心就医', '便捷泊车', '便捷乘车', '图书借阅'
      ];
    },
    openData() {
      return [
        this.houseGroupData.open,
        this.goodGroupData.open,
        this.hotelGroupData.open,
        this.hospitalGroupData.open,
        this.parkGroupData.open,
        this.rideGroupData.open,
        this.bookGroupData.open
      ];
    },
    useData() {
      return [
        this.houseGroupData.use,
        this.goodGroupData.use,
        this.hotelGroupData.use,
        this.hospitalGroupData.use,
        this.parkGroupData.use,
        this.rideGroupData.use,
        this.bookGroupData.use
      ];
    },
    creditData() {
      return [
        this.houseGroupData.score,
        this.goodGroupData.score,
        this.hotelGroupData.score,
        this.hospitalGroupData.score,
        this.parkGroupData.score,
        this.rideGroupData.score,
        this.bookGroupData.score
      ];
    },
    // 计算分页后的数据
    paginatedRiskData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.riskUserTableData.slice(start, end);
    }
  },
  methods: {
    // 处理每页数量变化
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 重置到第一页
    },
    // 处理页码变化
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    getScreenData() {
      axios.get('http://localhost:9208/screen/data')
        .then(res => {
          Message('大屏数据请求成功')

          this.regionData = JSON.parse(res.data.data.regionData)

          this.overallGroupData = JSON.parse(res.data.data.overallGroupData)

          this.creditScoreData = JSON.parse(res.data.data.creditScoreData)
          this.ageData = JSON.parse(res.data.data.ageData)
          this.genderData = JSON.parse(res.data.data.genderData)
          this.jobTypeData = JSON.parse(res.data.data.jobTypeData)

          this.houseGroupData = JSON.parse(res.data.data.houseGroupData)
          this.goodGroupData = JSON.parse(res.data.data.goodGroupData)
          this.hospitalGroupData = JSON.parse(res.data.data.hospitalGroupData)
          this.hotelGroupData = JSON.parse(res.data.data.hotelGroupData)
          this.parkGroupData = JSON.parse(res.data.data.parkGroupData)
          this.rideGroupData = JSON.parse(res.data.data.rideGroupData)
          this.bookGroupData = JSON.parse(res.data.data.bookGroupData)

          this.riskUserTableData = JSON.parse(res.data.data.riskUserTableData)
        })
        .catch(err => {
          console.error('大屏数据请求成功：', err)
          Message('大屏数据请求失败：', err)
        })
    },
    updateNow() {
      axios.get('http://localhost:8000/py/screen/update/regular')
        .then(res => {
          if (res.data.status == 'success'){
            Message('大屏数据更新成功')
            this.getScreenData()
          } else {
            Message('大屏数据更新新失败')
          }
        })
        .catch(err => {
          console.error('更新失败', err)
          Message('大屏数据更新新失败')
        })
    }
  },
  mounted() {
    this.getScreenData()
  },
  data() {
    return {
      currentPage: 1,  // 当前页码
      pageSize: 9,     // 每页显示数量
      showMapDataType: 'credit',// 默认显示信用分数据
      regionData: [
        { name: '和平区', score: 750, income: 12000 },
        { name: '沈河区', score: 680, income: 11000 },
        { name: '大东区', score: 620, income: 9500 },
        { name: '皇姑区', score: 700, income: 10500 },
        { name: '铁西区', score: 650, income: 10000 },
        { name: '苏家屯区', score: 600, income: 9000 },
        { name: '浑南区', score: 720, income: 11500 },
        { name: '沈北新区', score: 630, income: 9800 },
        { name: '于洪区', score: 610, income: 9300 },
        { name: '辽中区', score: 590, income: 8800 },
        { name: '康平县', score: 570, income: 8500 },
        { name: '法库县', score: 560, income: 8200 },
        { name: '新民市', score: 580, income: 8600 }
      ],
      overallGroupData: {
        totalOpen: 1234567,
        totalUsage: 789012,
        weeklyOpen: 34567,
        weeklyUsage: 56789
      },
      creditScoreData: [
        { name: '600', value: 120 },
        { name: '111', value: 200 },
        { name: '700', value: 150 },
        { name: '222', value: 100 },
        { name: '1000', value: 100 },
      ],
      ageData: [
        { name: '18-24', value: 100 },
        { name: '25-34', value: 200 },
        { name: '35-44', value: 150 },
        { name: '45-54', value: 80 }
      ],
      genderData: [
        { name: '男', value: 200 },
        { name: '女', value: 200 }
      ],
      jobTypeData: [
        { name: '学生', value: 100 },
        { name: '上班族', value: 250 },
        { name: '自由职业', value: 100 },
        { name: '退休', value: 50 }
      ],
      houseGroupData: {
        open: 2,
        use: 2,
        score: 2
      },
      goodGroupData: {
        open: 1,
        use: 1,
        score: 1
      },
      hotelGroupData: {
        open: 2,
        use: 2,
        score: 2
      },
      hospitalGroupData: {
        open: 3,
        use: 3,
        score: 3
      },
      parkGroupData: {
        open: 4,
        use: 4,
        score: 4
      },
      rideGroupData: {
        open: 5,
        use: 5,
        score: 5
      },
      bookGroupData: {
        open: 6,
        use: 6,
        score: 6
      },
      riskUserTableData: [{
        name: 'a',
        phone: '1234567890',
        overdue_days: 2
      }, {
        name: 'b',
        phone: '123456789021',
        overdue_days: 3
      }, {
        name: 'b',
        phone: '123456789034',
        overdue_days: 4
      }, {
        name: 'c',
        phone: '1234567890234',
        overdue_days: 2
      }, {
        name: 'c',
        phone: '1234567890234',
        overdue_days: 2
      }, {
        name: 'c',
        phone: '1234567890234',
        overdue_days: 2
      }, {
        name: 'c',
        phone: '1234567890234',
        overdue_days: 2
      }, {
        name: 'c',
        phone: '1234567890234',
        overdue_days: 2
      }, {
        name: 'c',
        phone: '1234567890234',
        overdue_days: 2
      }, {
        name: 'c',
        phone: '1234567890234',
        overdue_days: 2
      }, {
        name: 'c',
        phone: '1234567890234',
        overdue_days: 2
      }]
    };
  }
};
</script>

<style>
/* 浅色主题重构 */
.dashboard-container {
  background-color: #f5f7fa;
  /* 浅灰蓝背景 */
  color: #303133;
  /* 深灰文字 */
  min-height: 100vh;
  padding: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.dashboard-header {
  background: linear-gradient(90deg, #eef2f7, #dce6f0);
  /* 浅灰渐变 */
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 15px 25px;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e4e7ed;
  /* 添加分割线 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  /* 柔和阴影 */
}

.title-section .main-title {
  color: #1f2d3d;
  /* 深蓝灰 */
}

/* 核心指标卡片 */
.kpi-section .el-col {
  padding: 10px;
}

/* 内容区块样式 */
.main-content,
.secondary-content {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  /* 浅阴影 */
  border: 1px solid #ebeef5;
  /* 浅灰边框 */
}

.section-title {
  color: #409eff;
  /* 主题蓝色 */
  border-left: 4px solid #409eff;
  /* 蓝色强调线 */
}

/* 分区卡片样式 */
.map-section,
.user-profile-section,
.service-section,
.risk-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  height: 100%;
  border: 1px solid #ebeef5;
  /* 统一边框 */
}

.dashboard-footer {
  color: #909399;
  /* 浅灰文字 */
  border-top: 1px solid #ebeef5;
  /* 顶部分隔线 */
}

/* 实时指示器 */
.live-dot {
  background-color: #67c23a;
  /* 绿色更符合浅色主题 */
}

/* 响应式调整 */
@media (max-width: 1200px) {

  .main-content .el-col,
  .secondary-content .el-col {
    width: 100%;
  }
}

/* 单选按钮组样式 */
.map-selector {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.radio-group {
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  background: #f0f5ff;
  border: 1px solid #dcdfe6;
}

.map-radio {
  display: none;
  /* 隐藏原生单选按钮 */
}

.radio-group label {
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  color: #606266;
}

.radio-group label i {
  margin-right: 5px;
  font-size: 14px;
}

.radio-group label.active {
  background: #409eff;
  color: #fff;
  box-shadow: 0 2px 6px rgba(64, 158, 255, 0.3);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .map-selector {
    flex-direction: column;
    align-items: flex-start;
  }

  .radio-group {
    margin-top: 10px;
    width: 100%;
  }
}
</style>